<!--
 * @Author: linjituan linjituan@revolution.com
 * @Date: 2024-10-14 00:40:29
 * @LastEditors: linjituan linjituan@revolution.com
 * @LastEditTime: 2024-10-15 12:45:08
 * @FilePath: \hm-twx-admin\src\views\posts\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="posts-wrap">
    <div class="content-left">
      <div class="body">
        <msgPost></msgPost>
      </div>
    </div>
    <div class="content-right" v-if="!isMobile">
      <rightCard></rightCard>
      <rightCard></rightCard>
      <rightCard></rightCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import { msgPost } from "@/components/Post/index";
import { rightCard } from "@/components/rightCard/index";
</script>

<style scoped  lang="less">
.posts-wrap {
  display: flex;
  min-height: 100%;
  background: #000;

  .content-left {
    flex: 1.5;
    padding: 20px;
    border-right: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;

    .item-wrap {
      float: right;
      padding: 40px;
      font-size: 16px;
      color: #fff;

      .item-cell {
        padding: 10px 0;
        margin: 10px;
        text-align: center;
        cursor: pointer;
        border-radius: 40px;

        &.active {
          color: #00b1ff;
        }

        &.hover:hover {
          background: rgb(102 102 102 / 22.6%);
        }

        .btn {
          padding: 10px;
          background: #00b1ff;
          border-radius: 40px;
        }
      }
    }
  }

  .content-right {
    flex: 1;
  }
}
</style>